<template>
	<view class="content">
		<view class="info b ">
			<view class="name padding-left">{{ data.title }}</view>
			<view class="detail padding">
				<image :src="data.cover" mode="" style="width: 210rpx; height: 210rpx; " @click="preview(data.cover)" class="r"></image>
				<view class="left" style="display: flex; flex-direction: column;">
					<text class="text">{{ data.name }}</text>
					<text class="detailed">{{ data.brief }}</text>
					<text class="unit">*1</text>
					<view class="prc">
						<text>￥{{ data.price }}/天</text>
						<text class="margin-left">￥{{ data.lineation }}/天</text>
					</view>
				</view>
			</view>
			<view class="ordrNum padding">订单编号：{{ data.number }}</view>
		</view>
		<u-picker v-model="show" mode="time" @confirm="confirm"></u-picker>
		<u-picker v-model="show1" mode="time" @confirm="confirm1"></u-picker>
		<view class="star padding-left b" @click="openPkcer(1)">
			<text>租借开始时间：</text>
			<input type="text" value="" v-model="rent_start" placeholder="请选择租借开始时间" placeholder-class="yy" />
		</view>
		<view class="star padding-left b" @click="openPkcer(2)">
			<text>租借结束时间：</text>
			<input type="text" value="" v-model="rent_lease" placeholder="请选择租借结束时间" placeholder-class="yy" />
		</view>
		<view class="star padding-left b">
			<text>租借场地：</text>
			<input type="text" value="" v-model="place" placeholder="请输入租借场地" placeholder-class="yy" />
		</view>
		<view class="star padding-left b">
			<text>联系电话：</text>
			<input type="text" value="" v-model="phone" placeholder="请输入电话号码" placeholder-class="yy" />
		</view>
		<view class="star padding-left padding-right b" style="justify-content: space-between;">
			<text>总价</text>
			<text class="red">￥{{ prc }}</text>
		</view>
		<view class="pay"><view class="btn" @click="payImmediately">立即支付</view></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			data: {},
			show1: false,
			show: false,
			params: {
				year: true,
				month: true,
				day: true,
				hour: false,
				minute: false,
				second: false,
			},
			rent_start: '',
			rent_lease: '',
			place: '',
			phone: '',
			prc: 0,
			id:''
		};
	},
	onLoad(e) {
		e && (this.id = e.oid);
		this.getOrdr(e);
		uni.setNavigationBarColor({
			frontColor: '#ffffff',
			backgroundColor: '#ff0000',
			animation: {
				duration: 400,
				timingFunc: 'easeIn',
			},
		});
	},
	methods: {
		dateDiff(first, second) {
			if (first != '' && second != '') {
				if (Date.parse(second) - Date.parse(first) > 0) {
					const firstDate = new Date(first);
					const secondDate = new Date(second);
					const diff = Math.abs(firstDate.getTime() - secondDate.getTime());
					const result = parseInt(diff / (1000 * 60 * 60 * 24));
					uni.$showMsg(`租用时间为${result}天 !` , 2000) 
					this.prc = this.data.price * result
					return result ? result + 1 : 0;
				} else {
					uni.$showMsg('请重新选择时间!',2000);
					this.rent_start = '';
					this.rent_lease = '';
				}
			}
		},

		async payImmediately() {
			if (!this.rent_start) return uni.$showMsg('请选择租借开始时间');
			if (!this.rent_lease) return uni.$showMsg('请选择租借结束时间');
			if (!this.place) return uni.$showMsg('请输入租借场地');
			if (!this.phone) return uni.$showMsg('请输入电话号码');
			let obj = {
				oid: this.id,
				rent_start: this.rent_start,
				rent_lease: this.rent_lease,
				place: this.place,
				phone: this.phone,
			};
			const res = await this.$u.post('api/shop/pay_set_details', obj, {});
			uni.$showMsg(res.msg);
			setTimeout(() => {
				uni.switchTab({
					url: '../dindan_a',
				});
			}, 500);
			
		},
		confirm(e) {
			this.rent_start = `${e.year}-${e.month}-${e.day}`;
			this.dateDiff(this.rent_start, this.rent_lease);
		},
		confirm1(e) {
			this.rent_lease = `${e.year}-${e.month}-${e.day}`;
			this.dateDiff(this.rent_start, this.rent_lease);
		},
		openPkcer(i) {
			i == 1 ? (this.show = true) : (this.show1 = true);
		},
		preview(urls) {
			uni.previewImage({
				urls: [urls],
				longPressActions: {
					itemList: ['发送给朋友', '保存图片', '收藏'],
					success: function(data) {
					},
					fail: function(err) {
					},
				},
			});
		},
		/* 获取订单 */
		async getOrdr(e) {
			let obj = {
				oid: e.oid,
			};
			const res = await this.$u.post('api/shop/pay_details', obj, {});

			this.data = res.data;
		},
	},
};
</script>

<style lang="scss" scoped>
.content {
	width: 100%;
	height: 100%;
	background-color: #f5f8fd;
	.red {
		color: #ff0000;
	}
	.pay {
		position: fixed;
		display: flex;
		justify-content: center;
		align-items: center;
		bottom: 0;
		width: 750rpx;
		height: 120rpx;
		background: #ffffff;
		.btn {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 690rpx;
			height: 90rpx;
			background: #ff1a14;
			border-radius: 45rpx;

			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ffffff;
		}
	}
	.star {
		display: flex;
		align-items: center;
		width: 691rpx;
		height: 100rpx;
		background: #ffffff;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 20rpx;

		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		line-height: 1;
		/deep/.yy {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			line-height: 1;
		}
		input {
			width: 400rpx;
		}
	}
	.info {
		width: 690rpx;

		background: #ffffff;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		.ordrNum {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			line-height: 1;
		}
		.name {
			display: flex;
			align-items: center;
			width: 100%;
			height: 68rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 36rpx;
			border-bottom: 1rpx solid #f5f8fd;
		}
		.detail {
			display: flex;
			border-bottom: 1rpx solid #f5f8fd;
			.left {
				justify-content: space-around;
				margin-left: 25rpx;
				.text {
					height: 29rpx;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 1;
				}
				.detailed {
					height: 24rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
					line-height: 1;
				}
				.unit {
					height: 18rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
					line-height: 1;
				}
				.prc {
					display: flex;
					align-items: center;
					text:nth-child(1) {
						height: 28rpx;
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #ff0000;
						line-height: 1;
					}
					text:nth-child(2) {
						height: 23rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						text-decoration: line-through;
						color: #999999;
						line-height: 1;
					}
				}
			}
		}
	}
}
</style>
